<template>
  <div class="verification">
    <transition name="right-fade">
      <div v-if="isShowContent">
        <Content v-cloak :info="info" @refresh="refresh" />
      </div>
    </transition>
    <transition name="right-fade">
      <CheckCode
        ref="checkCode"
        v-cloak
        :info="info"
        @check="check"
        v-model="code"
        v-if="!isShowContent"
      />
    </transition>
  </div>
</template>

<script>
import Content from "./components/content";
import CheckCode from "./components/checkCode";
import API_CONFIG from "@/setting.js";
export default {
  name: "verification",
  components: {
    Content,
    CheckCode,
  },
  data() {
    return {
      code: "",
      info: {},
      isShowContent: false,
    };
  },
  created() {
    const code = this.$utils.getSearchString("code");
    if (code) {
      this.code = code;
      this.getVerification();
    }
  },
  methods: {
    async getVerification() {
      this.$toast.loading({
        duration: 0,
        message: "加载中...",
        forbidClick: true,
      });
      const config = {
        code: this.code,
      };
      this.$http({
        url: "/private-xm/authenticity/verify",
        method: "get",
        params: {
          code: this.code.replace(/\s/ig,''),
        },
      })
        .then((result) => {
          this.$toast.clear()
          const info = result.data;
          if ({}.toString.call(info) === "[object Object]") {
            info.logoUrl = `${API_CONFIG.staticUrl}${info.logoUrl}`;
            this.isShowContent = true;
            this.info = info;
          } else {
            this.$dialog
              .alert({ title: "提示", message: "无效的文件" })
              .then(() => {
                this.$refs.checkCode.$refs.input.focus();
              });
          }
        })
        .catch((error) => {
          console.log(error, "error");
          this.$toast.clear()
          this.$toast.fail(error);
        });
    },
    refresh() {
      this.isShowContent = false;
    },
    check() {
      if (!this.code) return;
      const refresh = () => {
        const { origin, pathname } = window.location;
        window.location.href = `${window.location.href.split("?")[0]}?code=${
          this.code.replace(/\s/gi,'')
        }`;
        this.getVerification();
      };
      refresh();
    },
  },
};
</script>

<style lang="scss" scoped>
[v-cloak] {
  display: none;
}

input {
  line-height: normal;
}

img[lazy="loading"] {
  transform: scale(0.1) translateY(-200%);
}
.right-fade-enter-active,
.right-fade-leave-active {
  position: absolute;
  transition: all 0.3s ease-out;
}
.right-fade-enter,
.right-fade-leave-to {
  opacity: 0;
  position: absolute;
  transform: translate3d(100px, 0, 0);
}

@media screen and (min-width: 768px) {
  .right-fade-enter-active,
  .right-fade-leave-active {
    position: relative;
    transition: all 0.3s ease-out;
  }
  .right-fade-enter,
  .right-fade-leave-to {
    opacity: 0;
    position: relative;
    transform: translate3d(0, 0, 0);
  }
}
</style>
